<template>
  <div class="outBig">
    <nav-bar class="category-nav">
      <div slot="center">分类</div>
    </nav-bar>
    <div class="content">
      <category-content>
        <category-content-item
          v-for="(item, index) in lists"
          @click.native="isshow(index)"
          :class="{ active: contentIndex === index ? true : false }"
          :list="item"
          :key="index"
        ></category-content-item>
      </category-content>
      <scroll class="tab-content">
        <category-image :images="image"></category-image>
        <tab-control
          :titles="['流行', '新款', '精选']"
          @tabclick="titleChange"
        ></tab-control>
        <category-goods :good="goods"></category-goods>
      </scroll>
    </div>
  </div>
</template>

<script>
import categoryContent from "./categoryChildren/categoryContent.vue";
import categoryContentItem from "./categoryChildren/categoryContentItem.vue";
import categoryImage from "./categoryChildren/categoryImage.vue";
import categoryGoods from "./categoryChildren/goods/categoryGoods.vue";

import tabControl from "components/common/tab-control.vue";
import navBar from "components/common/navBar.vue";
import scroll from "components/common/scroll.vue";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category.js";
export default {
  components: {
    navBar,
    scroll,
    tabControl,

    categoryContentItem,
    categoryContent,
    categoryImage,
    categoryGoods,
  },
  data() {
    return {
      iid: null,
      lists: null,
      contentIndex: 0,
      image: null,
      goods: null,
      title: ["pop", "new", "sell"],
      flag: "pop",
    };
  },
  created() {
    getCategory().then((res) => {
      this.lists = res.data.category.list;
    });

    getSubcategory(3627).then((res) => {
      this.image = res.data.list;
    });
    getCategoryDetail(10062603, "pop").then((res) => {
      this.goods = res;
    });
  },
  methods: {
    isshow(index) {
      this.contentIndex = index;
      getSubcategory(this.lists[this.contentIndex * 1].maitKey).then((res) => {
        this.image = res.data.list;
      });
      getCategoryDetail(
        this.lists[this.contentIndex * 1].miniWallkey,
        this.flag
      ).then((res) => {
        this.goods = res;
      });
    },
    titleChange(index) {
      console.log(index);
      this.flag = this.title[index];
      getCategoryDetail(
        this.lists[this.contentIndex * 1].miniWallkey,
        this.flag
      ).then((res) => {
        this.goods = res;
      });
    },
  },
};
</script>

<style scoped>
.outBig {
  height: 100vh;
}
.category-nav {
  background-color: var(--color-tint);
  color: azure;
}
.content {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  display: flex;
}
.active {
  background-color: rgb(255, 255, 254);
  border-left: 4px solid rgb(235, 11, 11);
  color: rgb(235, 11, 11);
}
.tab-content {
  height: 100%;
  width: 80%;
}
</style>
